<nz-modal [(nzVisible)]="visible" nzTitle="" (nzOnCancel)="handleCancel()" (nzOnOk)="submitForm()"
  [nzOkLoading]="isOkLoading" nzWidth="5.55rem" nzWrapClassName="vertical-center-modal" nzOkDisabled="false"
  [nzStyle]="{ top: '1.5rem' }" [nzOkText]='null' [nzCancelText]='null' [nzFooter]="addRoleFooter">
  <form nz-form [formGroup]="userInfoForm" class="form" (ngSubmit)="submitForm()">

    <div class="title">
      <i class="add-user-dot"></i>
      {{'UserManagement.ManageRole.' + title | translate}}
    </div>

    <!-- 分割线 -->
    <div class="hrs"></div>

    <!-- 第一个input -->
    <div style="padding: 18px 24px 0 24px !important;">
      <nz-form-item class="name">
        <nz-form-label nzRequired nzFor="name role">
          {{'UserManagement.ManageRole.RoleName' | translate}}</nz-form-label>
        <nz-form-control>
          <input nz-input [placeholder]="'' | translate" formControlName="roleName" id="roleName" autocomplete="off" />
          <nz-form-explain *ngIf="userInfoForm.get('roleName')?.dirty && userInfoForm.get('roleName')?.errors">
            {{'UserManagement.ManageRole.MandatoryWarning' | translate}}
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <!-- <nz-form-item class="role">
        <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="role">
          {{'UserManagement.ManageRole.Role' | translate}}</nz-form-label>
        <nz-form-control [nzSm]="15" [nzXs]="24">
          <nz-select 
            formControlName="role" 
            nzMode='multiple' 
            style="background: rgba(230, 230, 230, 1);font-size:22px;border-radius: 5px" 
            nzShowSearch
            nzAllowClear
            [nzPlaceHolder]="'' | translate" 
            id="role">
              <nz-option *ngFor="let item of selectionList" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
            </nz-select>
          <nz-form-explain *ngIf="userInfoForm.get('role')?.dirty && userInfoForm.get('role')?.errors">
            {{'UserManagement.ManageRole.MandatoryWarning' | translate}}
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item> -->

      <!-- 第二个 -->
      <nz-form-item class="accesRight tree">
        <nz-form-label>
          {{"UserManagement.ManageRole.AccessRight" | translate}}</nz-form-label>
        <nz-form-control>

          <nz-form-explain class="choose-tree">
            <!-- <nz-tree [nzData]="treeData" #nzTreeComponent #nzTree nzCheckable [nzCheckedKeys]="selectedNodeIds">
              <ng-template #nzTreeTemplate let-node>
                <span class="custom-node">{{node.title}}</span>
              </ng-template>
        </nz-tree> -->
            <nz-tree #nzTree [nzData]="tree" nzCheckable nzMultiple [nzCheckedKeys]="defaultCheckedKeys"
              [nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]="defaultSelectedKeys" (nzClick)="nzEvent($event)"
              (nzExpandChange)="nzEvent($event)" (nzCheckBoxChange)="nzEvent($event)">
            </nz-tree>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <!-- 第三个 -->
      <nz-form-item class="name">
        <nz-form-label nzFor="description role">
          {{'UserManagement.ManageRole.Description' | translate}}</nz-form-label>
        <nz-form-control>
          <input nz-input [placeholder]="'' | translate" formControlName="roleDescription" id="roleDescription" autocomplete="off" />
        </nz-form-control>
      </nz-form-item>
    </div>

    <!-- <nz-form-item class="name">
      <nz-form-label nzRequired nzFor="name role">
        {{'UserManagement.ManageRole.RoleName' | translate}}</nz-form-label>
      <nz-form-control>
        <input nz-input [placeholder]="'' | translate" formControlName="roleName" id="roleName" />
        <nz-form-explain *ngIf="userInfoForm.get('roleName')?.dirty && userInfoForm.get('roleName')?.errors">
          {{'UserManagement.ManageRole.MandatoryWarning' | translate}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item> -->

    <!-- <nz-form-item class="role">
      <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="role">
        {{'UserManagement.ManageRole.Role' | translate}}</nz-form-label>
      <nz-form-control [nzSm]="15" [nzXs]="24">
        <nz-select 
          formControlName="role" 
          nzMode='multiple' 
          style="background: rgba(230, 230, 230, 1);font-size:22px;border-radius: 5px" 
          nzShowSearch
          nzAllowClear
          [nzPlaceHolder]="'' | translate" 
          id="role">
            <nz-option *ngFor="let item of selectionList" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
          </nz-select>
        <nz-form-explain *ngIf="userInfoForm.get('role')?.dirty && userInfoForm.get('role')?.errors">
          {{'UserManagement.ManageRole.MandatoryWarning' | translate}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item> -->

    <!-- 第二个 -->
    <!-- <nz-form-item class="accesRight tree">
      <nz-form-label>
        {{"UserManagement.ManageRole.AccessRight" | translate}}</nz-form-label>
      <nz-form-control>

        <nz-form-explain class="choose-tree"> -->
          <!-- <nz-tree [nzData]="treeData" #nzTreeComponent #nzTree nzCheckable [nzCheckedKeys]="selectedNodeIds">
            <ng-template #nzTreeTemplate let-node>
              <span class="custom-node">{{node.title}}</span>
            </ng-template>
		  </nz-tree> -->
          <!-- <nz-tree #nzTree [nzData]="tree" nzCheckable nzMultiple [nzCheckedKeys]="defaultCheckedKeys"
            [nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]="defaultSelectedKeys" (nzClick)="nzEvent($event)"
            (nzExpandChange)="nzEvent($event)" (nzCheckBoxChange)="nzEvent($event)">
          </nz-tree>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item> -->

    <!-- 第三个 -->
    <!-- <nz-form-item class="name">
      <nz-form-label nzFor="description role">
        {{'UserManagement.ManageRole.Description' | translate}}</nz-form-label>
      <nz-form-control>
        <input nz-input [placeholder]="'' | translate" formControlName="roleDescription" id="roleDescription" />
      </nz-form-control>
    </nz-form-item> -->

    <!-- <div class="details"> -->
      <!-- <div class="name">
        <p>Name</p>
        <input nz-input [placeholder]="'' | translate" style="width:3.07rem" formControlName="roleName" />
      </div>
      <div class="role">
        <p>Role</p>
        <input nz-input [placeholder]="'' | translate" style="width:3.07rem" formControlName="createDate" />
        <nz-select style="width: 3.07rem;background: rgba(230, 230, 230, 1);" class="select">
          <nz-option nzLabel="Jack" nzValue="jack"></nz-option>
          <nz-option nzLabel="Lucy" nzValue="lucy"></nz-option>
          <nz-option nzLabel="Tom" nzValue="tom"></nz-option>
        </nz-select>
      </div> -->
      <!-- <div class="tree">
        <div class="access">
          <p>Access right</p>
        </div>
        <div class="choose-tree">
          <nz-tree [nzData]="treeData" #nzTreeComponent #nzTree nzCheckable (nzCheckBoxChange)="select($event)">
            <ng-template #nzTreeTemplate let-node>
              <span class="custom-node">{{node.title}}</span>
            </ng-template>
          </nz-tree>
        </div>
      </div> -->
    <!-- </div> -->

  </form>
  <ng-template #addRoleFooter>
    <div style="padding: 10px 16px 20px !important;">
      <button (click)="handleCancel()" nz-button nzType="default">{{'UserManagement.ManageOrganization.Cancel' |
        translate}}</button>
      <button (click)="submitForm()" nz-button nzType="primary">{{'UserManagement.ManageOrganization.Save' |
        translate}}</button>
    </div>
  </ng-template>
</nz-modal>